<!--
 * @Author: zhao 13370229059@163.com
 * @Date: 2024-08-21 20:30:28
 * @LastEditors: zhao 13370229059@163.com
 * @LastEditTime: 2024-11-25 23:23:31
 * @FilePath: \dance\components\z-navbar\z-navbar.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <view class="navbar">
    <view class="navbar-arrow">
      <uv-icon name="arrow-left" color="#fff" size="59rpx" @click="onLeft"></uv-icon>
    </view>
    <view class="title">{{ props.title }}</view>
  </view>
</template>

<script setup>
  import { reactive, ref, computed } from 'vue';
  import { onLeft } from '@/common/js/fn';
  let props = defineProps({
    title: {
      type: String,
      default: ''
    }
  });
  // // 获取推荐偏好
  // let style = computed(() => {
  //   const style = {};
  //   // 状态栏高度，由于某些安卓和微信开发工具无法识别css的顶部状态栏变量，所以使用js获取的方式
  //   style.top = uni.$uv.addUnit(uni.$uv.sys().statusBarHeight + 5, 'px');
  //   return uni.$uv.deepMerge(style);
  // });
</script>

<style lang="scss" scoped>
  .navbar {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 91rpx;
    margin-bottom: 35rpx;
    position: relative;
    flex-shrink: 0;
    &-arrow {
      position: absolute;
      top: 50%;
      left: 26rpx;
      transform: translate(0, -50%);
      z-index: 999;
      height: 91rpx;
      width: 91rpx;
      box-shadow: 0px 0px 0px 0.2px #aaaaaa;
      background-color: rgba(0, 0, 0, 0.16);
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .title {
      font-size: 41.86rpx;
      color: rgba(0, 0, 0, 1);
      font-weight: 700;
    }
  }
</style>
